/*
 * @Author: thl
 * @Date: 2023-06-26 10:12:14
 * @FilePath: \cw_web\gl\src\views\dataBoard\components\lineChart.jsx
 * @Descripttion: 
 */
import React, { Component } from "react";
import eCharts from "echarts";
import PropTypes from "prop-types";
let myChart = null
class TheLineChart extends Component {
    componentDidMount() {
        myChart = eCharts.init(this.chartRef);
        //点击事件
    }
    state = {
        params: {}
    }
    set(data) {
        myChart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                },
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            legend: {
                data: data.legend,
                selected:data.legendFlag
            },
            xAxis:
            {
                type: "category",
                data: data.lineXData,
            },

            yAxis:
            {
                type: "value"
            },
            dataZoom: [
                {
                    show: true,
                    height: 12,
                    xAxisIndex: [0],
                    bottom: "0%",
                    start: 10,
                    end: 90,
                    handleSize: "110%",
                    handleStyle: {
                        color: "#d3dee5",
                    },
                    textStyle: {
                        color: "#000",
                    },
                    borderColor: "#90979c",
                    backgroundColor: 'rgba(47,69,84,0)'
                },
                {
                    type: "inside",
                    show: true,
                    height: 15,
                    start: 0,
                    end: 100,
                },
            ],

            series:
                data.lineYData,
        }, true);

        // 图例开关的行为只会触发 legendselectchanged 事件
        myChart.on('legendselectchanged', (params) => {
            // 获取点击图例的选中状态
            var isSelected = params.selected[params.name];
            // sessionStorage.setItem('dataBoardSelected',JSON.stringify(params.selected) );
            this.props.theCache(params.selected)
            // 在控制台中打印
            console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);
            // 打印所有图例的状态
            console.log(params.selected);
        });
    }
    render() {
        return (
            this.props.lineXData &&
            this.props.lineYData && (
                <div
                    ref={(ref) => (this.chartRef = ref)}
                    id="lineChart"
                    style={{ width: "100%", height: "100%" }}
                />
            )
        );
    }
}

TheLineChart.propTypes = {
    lineXData: PropTypes.array,
    lineYData: PropTypes.array,
    name: PropTypes.string,
    yName: PropTypes.string,
    xName: PropTypes.string,
};
TheLineChart.defaultProps = {
    lineXData: ["0"],
    lineYData: ["0"],
    legend: [],
};
export default TheLineChart;
